// 购物车组件
<template>
  <div class="cart-page">
    <div class="no-shop" v-if="carEmpty">
      <i class="iconfont icon-gouwuche"></i>
      <div>您的购物车还是空空的，快去逛逛吧！</div>
      <router-link to="/homepage">去逛逛</router-link>
    </div>
    <div v-else>
      <div class="cart-header">河南省 郑州市 高新区 大里鑫桂源</div>
      <div class="cart-list">
        <div
          class="shop"
          v-for="(cartListData, index) in cartListDatas"
          :key="cartListData.ru_id"
        >
          <div class="shop-name">
            <div class="icon" @click="shopSelect(cartListData, index)">
              <!-- 未选中 -->
              <i
                class="iconfont icon-yuanxingweixuanzhong"
                v-if="!cartListData.isShopSelect"
              ></i>
              <!-- 选中 -->
              <i
                class="iconfont icon-yuanxingxuanzhongfill"
                style="color: #f55"
                v-else
              ></i>
            </div>
            <span>{{ cartListData.rz_shopName }}</span>
          </div>
          <div class="goods">
            <ul>
              <li
                v-for="(cartList, index) in cartListData.children"
                :key="cartList.goods_id"
              >
                <div class="icon" @click="goodSelect(cartList, index)">
                  <!-- 未选中 -->
                  <i
                    class="iconfont icon-yuanxingweixuanzhong"
                    v-if="!cartList.isSelect"
                  ></i>
                  <!-- 选中 -->
                  <i
                    class="iconfont icon-yuanxingxuanzhongfill"
                    style="color: #f55"
                    v-else
                  ></i>
                </div>
                <div class="goods-thumb">
                  <img :src="cartList.goods_thumb" alt="" />
                </div>
                <div class="goods-info">
                  <div class="goods-title">
                    {{ cartList.goods_name }}
                  </div>
                  <div class="goods-content">
                    <div class="goods-price">
                      ￥<span>{{ cartList.goods_price }}</span>
                    </div>
                    <div class="goods-num">
                      <a href="#" @click="addCartNum(cartListData, index, 1)"
                        >-</a
                      >
                      <input type="text" v-model="cartList.buyNum" />
                      <a href="#" @click="addCartNum(cartListData, index, 2)"
                        >+</a
                      >
                      <i class="iconfont icon-shoucang1"></i>
                      <i
                        class="iconfont icon-shanchu"
                        @click="deleteGoods(cartList, index)"
                      ></i>
                    </div>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="cart-footer">
        <div class="icon" @click="allSelect">
          <!-- 未选中 -->
          <i class="iconfont icon-yuanxingweixuanzhong" v-if="!selectAll"></i>
          <!-- 选中 -->
          <i
            class="iconfont icon-yuanxingxuanzhongfill"
            style="color: #f55"
            v-else
          ></i>
          <span>全选</span>
        </div>
        <div class="total">
          合计:￥<span>{{ totalPrice }}</span>
        </div>
        <div class="buy">去结算({{ totalNum }})</div>
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      // selectAll: true,
      /* cartListDatas: [
        {
          shop_id: 1,
          shop_name: "自营",
          is_shop_select: true,
          children: [
            {
              goods_id: 1001,
              shop_id: 1,
              goods_name: "冰墩墩",
              goods_thumb:
                "https://img14.360buyimg.com/n1/s300x300_jfs/t1/124408/27/4053/22496/5ed8d01cE0c7a873d/4cec56a2fcbef123.jpg",
              goods_price: "1",
              is_goods_select: true,
              buy_num: 1,
            },
            {
              goods_id: 1002,
              shop_id: 1,
              goods_name: "冰墩墩2",
              goods_thumb:
                "https://img14.360buyimg.com/n1/s300x300_jfs/t1/124408/27/4053/22496/5ed8d01cE0c7a873d/4cec56a2fcbef123.jpg",
              goods_price: "1",
              is_goods_select: true,
              buy_num: 1,
            },
          ],
        },
        {
          shop_id: 2,
          shop_name: "官方旗舰店",
          is_shop_select: true,
          children: [
            {
              goods_id: 2001,
              shop_id: 2,
              goods_name: "冰墩墩201",
              goods_thumb:
                "https://img14.360buyimg.com/n1/s300x300_jfs/t1/124408/27/4053/22496/5ed8d01cE0c7a873d/4cec56a2fcbef123.jpg",
              goods_price: "1",
              is_goods_select: true,
              buy_num: 1,
            },
            {
              goods_id: 2002,
              shop_id: 2,
              goods_name: "冰墩墩202",
              goods_thumb:
                "https://img14.360buyimg.com/n1/s300x300_jfs/t1/124408/27/4053/22496/5ed8d01cE0c7a873d/4cec56a2fcbef123.jpg",
              goods_price: "1",
              is_goods_select: true,
              buy_num: 1,
            },
          ],
        },
      ],  */
    };
  },
  //监听属性 类似于data概念
  computed: {
    selectAll() {
      return this.$store.state.selectAll;
    },
    total() {
      return this.$store.state.total;
    },
    //总价
    totalPrice() {
      let price = 0;
      let data = this.$store.state.cartListData;
      data.map((item) => {
        item.children.map((value) => {
          if (value.isSelect) {
            price += value.buyNum * 1 * value.goods_price * 1;
          }
        });
      });
      return price;
    },
    //结算
    totalNum() {
      let price = 0;
      let data = this.$store.state.cartListData;
      data.map((item) => {
        item.children.map((value) => {
          if (value.isSelect) {
            price += value.buyNum * 1;
          }
        });
      });
      return price;
    },
    carEmpty(){
      if(this.$store.state.cartListData){
        return false
      }else{
        return true
      }
    },
    // 商品总价格
    /* totalPrice() {
      let total = 0;
      this.cartListDatas.map((item) => {
        item.children.map((value) => {
          if (value.is_goods_select) {
            total += Number(value.goods_price) * value.buy_num;
          }
        });
      });
      return total;
    }, */
    // 商品总数量
    /* totalNum() {
      let totalNum = 0;
      this.cartListDatas.map((item) => {
        item.children.map((value) => {
          if (value.is_goods_select) {
            totalNum += Number(value.buy_num);
          }
        });
      });
      return totalNum;
    }, */
    cartListDatas() {
      return this.$store.state.cartListData;
    },
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addCartNum(cartlist, index, flag) {
      let data;
      if (flag == 2) {
        cartlist.children[index].buyNum += 1;
        data = {
          cartlist,
          index,
        };
      } else {
        if (cartlist.children[index].buyNum > 1) {
          cartlist.children[index].buyNum -= 1;
        } else {
          cartlist.children[index].buyNum = 1;
        }
        data = {
          cartlist,
          index,
        };
      }
      this.$store.commit("addCarNum", data);
    },
    goodSelect(item, index) {
      item.isSelect = !item.isSelect;
      let data = {
        item,
        index,
      };
      this.$store.commit("goodSelect", data);
    },
    shopSelect(item, index) {
      item.isShopSelect = !item.isShopSelect;
      let data = {
        item,
        index,
      };
      this.$store.commit("shopSelect", data);
    },
    allSelect() {
      this.$store.commit("selectAll");
    },
    deleteGoods(item, index) {
      let data = {
        item,
        index,
      };
      this.$store.commit("delete", data);
    },
    /* //商品的选择与店铺选择的关系
    goodsSelectFn(cart) {
      cart.is_goods_select = !cart.is_goods_select;
      let shop_id = cart.shop_id;
      for (let i = 0; i < this.cartListDatas.length; i++) {
        if (this.cartListDatas[i].shop_id == shop_id) {
          this.cartListDatas[i].is_shop_select = this.cartListDatas[i].children.every(
            (item) => item.is_goods_select == true
          );
        }
      }
      //商品与全选
      this.selectAll = this.cartListDatas.every((item) => {
        return item.is_shop_select == true;
      });
    },
    //点击店铺的选择框
    shopSelectFn(cartListData) {
      cartListData.is_shop_select = !cartListData.is_shop_select;
      //店铺影响全选
      this.selectAll = this.cartListDatas.every((item) => {
        return item.is_shop_select == true;
      });
      //店铺影响商品
      cartListData.children.forEach((item) => {
        if (item.shop_id == cartListData.shop_id) {
          item.is_goods_select = cartListData.is_shop_select;
        }
      });
    },
    //点击全选框
   selectAllFn() {
      this.selectAll = !this.selectAll;
      //全选影响商品与店铺
      this.cartListDatas.map((item) => {
        item.is_shop_select = this.selectAll;
        item.children.map((value) => {
          value.is_goods_select = this.selectAll;
        });
      });
    },  */
  },
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.cart-page {
  width: 100%;
  height: auto;
  background-color: #efefef;
  .icon {
    i {
      font-size: 2rem;
    }
  }
  .cart-header {
    height: 4.4rem;
    width: calc(100% - 2rem);
    background-color: #fff;
    border-radius: 1rem;
    line-height: 4.4rem;
    font-size: 1.4rem;
    padding: 1rem;
    text-align: center;
  }
  .cart-list {
    width: calc(100% - 2rem);
    margin: 1rem;
    .shop {
      width: 100%;
      height: auto;
      border-radius: 1rem;
      background-color: #fff;
      margin: 1rem 0;
      padding: 0.5rem 0;
      .shop-name {
        height: 4.4rem;
        width: 100%;
        background-color: #fff;
        line-height: 4.4rem;
        font-size: 1.4rem;
        border-top-left-radius: 1rem;
        border-top-right-radius: 1rem;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .icon {
          margin-left: 1rem;
        }
      }
      .goods {
        ul {
          width: 100%;
          height: auto;
          li {
            height: 7rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 1.5rem;
            .icon {
              width: 4rem;
              text-align: center;
            }
            .goods-thumb {
              width: 7rem;
              height: 7rem;
              img {
                width: 7rem;
                height: 7rem;
              }
            }
            .goods-info {
              width: calc(100% - 11rem);
              margin-left: 1rem;
              .goods-title {
                width: 100%;
                height: 4rem;
                line-height: 2rem;
                font-size: 1.4rem;
                overflow: hidden;
                /* white-space: nowrap;
                text-overflow: ellipsis; */
                //多行文本出现省略号
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
              }
              .goods-content {
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 3rem;
                .goods-price {
                  font-size: 1.8rem;
                  color: #f55;
                }
                .goods-num {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  a {
                    display: block;
                    width: 3rem;
                    height: 2rem;
                    text-align: center;
                    line-height: 2rem;
                    font-size: 2rem;
                    background-color: #efefef;
                  }
                  input {
                    width: 4rem;
                    border: 1px solid #ccc;
                    box-sizing: border-box;
                    height: 2rem;
                    font-size: 1rem;
                    text-align: center;
                  }
                  i {
                    margin: 0 0.5rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .cart-footer {
    width: 100%;
    height: 4.4rem;
    position: fixed;
    bottom: 4.9rem;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    .buy {
      width: 10rem;
      height: 4.4rem;
      background-color: #f55;
      color: #fff;
      text-align: center;
      line-height: 4.4rem;
      font-size: 1.4rem;
    }
  }
  .no-shop {
    position: absolute;
    width: calc(100% - 2rem);
    height: 25rem;
    left: 1rem;
    top: 1rem;
    background: #fff;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    i {
      font-size: 15rem;
    }
    div {
      margin: 1.5rem 0;
    }
  }
}
</style>
